<template>
  <div class="box">
    <div class="container">
      <div class="containerHeader">
        <div>
          <el-menu
            :default-active="activeIndex1"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="0">单选题
              ({{ questionCount[0]?.total }})</el-menu-item>
            <el-menu-item index="1">多选题
              ({{ questionCount[1]?.total }})</el-menu-item>
            <el-menu-item index="2">判断题
              ({{ questionCount[2]?.total }})</el-menu-item>
            <el-menu-item index="3">填空题
              ({{ questionCount[3]?.total }})</el-menu-item>
            <el-menu-item index="4">论述题
              ({{ questionCount[4]?.total }})</el-menu-item>
          </el-menu>
        </div>

        <div>
          <el-button
            class="classifySetting"
            @click="clickClassifySet"
          >分类设置</el-button>
        </div>

      </div>

      <div class="tableBox">
        <Table
          :activeIndex1="activeIndex1"
          ref="questionTableRef"
          @setActive="setActive"
        ></Table>
      </div>
    </div>
    <Classifyset ref="classifysetRef"></Classifyset>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import Table from './components/table.vue'

// 引入分类设置的组件
import Classifyset from './components/classifyset.vue';

// 引入获取每种题目的题目数量接口
import { getQuestionCount } from '@/api/assessment/questionmanage.js'

const router = useRouter()
const route = useRoute()

// 当前菜单栏选中的索引
const activeIndex1 = ref('0')
const newActiveIndex = ref(null)

const questionTableRef = ref(null)
// 处理菜单栏滑动的方法
function handleSelect (activeIndex) {
  activeIndex1.value = activeIndex
  questionTableRef.value.clearPagination()
  questionTableRef.value.getQuestionList1(activeIndex1.value)
}



watch(
  activeIndex1,
  (newVal, oldVal) => {
    console.log(newVal, oldVal)
    newActiveIndex.value = newVal
    localStorage.setItem('activeIndex1', JSON.stringify(activeIndex1.value))
  }
)
onMounted(() => {
  // 获取当前菜单栏选中的索引
  const activeIndex = localStorage.getItem('activeIndex1')
  if (activeIndex) {
    activeIndex1.value = JSON.parse(activeIndex)
  }
})

watch(
  () => route.path,
  (newVal, oldVal) => {
    if (newVal != '/assment/addquestion') {
      localStorage.clear()
    }
  }
)

function setActive (activeIndex) {
  activeIndex1.value = activeIndex
}

const questionCount = ref([])
// 获取每种题目的题目数量
async function getQuestionCounts () {
  const res = await getQuestionCount({ sourceType: 0 })
  questionCount.value = res.data
}

getQuestionCounts()

const classifysetRef = ref(null)
// 点击分类设置按钮
function clickClassifySet () {
  classifysetRef.value.dialogVisible = true
}
</script>

<style lang="scss" scoped>
.box {
  padding: 32px 32px 32px 32px;
  background: #f5f6f9;

  .container {
    min-height: 936px;
    background-color: #fff;
    border-radius: 10px;
    .containerHeader {
      position: relative;
      .classifySetting {
        position: absolute;
        top: 11px;
        right: 37px;
        width: 112px;
        height: 40px;
        border-radius: 6px 6px 6px 6px;
        border: 1px solid #5974ff;
        font-size: 16px;
        color: #5974ff;
        &:hover {
          background-color: transparent;
        }
        &:focus {
          background-color: transparent;
        }
      }
    }
  }

  ::v-deep(.el-menu-item.is-active) {
    background-color: transparent !important;
    color: #5974ff !important;
    border-bottom: 4px solid #5974ff;
    font-weight: bold;
  }
  ::v-deep(.el-menu-item) {
    width: 160px;
    margin-right: 16px;
    font-size: 18px;
    color: #696969;
    &:hover {
      color: #5974ff;
      background-color: transparent !important;
    }
  }

  .tableBox {
    padding: 23px 32px 0 32px;
  }
}
</style>